<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物流大数据平台</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

    <style>
        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>

	<!--header-->
	<div class="header">
	    <div class="bg_header">
	        <div class="header_nav fl t_title">
	            物流大数据服务平台
	        </div> 
	    </div>
	</div>
	
	<!--main-->
	<div class="data_content">
	    <div class="data_time">
	        温馨提示: 点击模块后跳转至详情页面。        
	    </div>
	
	    <div class="data_main">
	        <div class="main_left fl">
	            <div class="left_1 t_btn6" style="cursor: pointer;">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                    <!--右下边框-->
	                    <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div> 
	                <div class="main_title"><img src="img/t_1.png" alt="">山东省货运收入</div>
	                <!-- 饼状图【玫瑰图半环图】 -->
	                <div id="chart_1" class="chart loadItem" data-url="data/huoyunshouru.json" data-type="pie" data-style="halfring" data-color='["#f845f1","#ad46f3","#5045f6","#4777f5","#44aff0","#45dbf7","#f6d54a","#f69846","#ff4343"]'
	                	data-legend-style="CT,circle,top:15%,#fff" data-showtext="label:{c}万元" data-series='[{"center":["50%", "40%"]}]'
	                	style="width:100%;height: 280px;"></div>
	            </div>
	            <div class="left_2" style="cursor: pointer;">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                    <!--右下边框-->
	                    <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div> 
	                <div class="main_title"><img src="img/t_2.png" alt="">山东省地图 </div>
	               	<!--  扩展地图 -->
	                <div id="chart_2" class="chart t_btn9 loadItem" data-url="data/mapdata.json"  data-type="extend" data-extendfn="map_extend" 
	                	data-visual-style="color:yellow>lightskyblue>orangered,hide" data-style="notitle label notooltip"
	                	style="width:100%;height: 280px;"></div>
	            </div>
	        </div>
	        <div class="main_center fl">
	            <div class="center_text">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                 <!--右下边框-->
	                 <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div> 
	                <div class="main_title"><img src="img/t_3.png" alt="">中国地图</div>
	                <div id="chart_map" style="width:100%;height:610px;"></div>
	            </div>
	        </div>
	        <div class="main_right fr">
	            <div class="right_1">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                    <!--右下边框-->
	                    <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div> 
	                <div class="main_title" style="width: 200px;"><img src="img/t_4.png" alt="">山东省货物周转量</div>
	                <!-- 折线图 -->
	                <div id="chart_3" class="echart t_btn7 loadItem" data-url="data/huowuzhouzhuanliang.json" data-type="line" data-style="nospace nosplity"
	                	data-axis-color="#fff,line:#fff" data-legend-style="CT,#fff,top:8%" data-grid-style="top:35%,right:5%" data-color='["#FF4949","#FFA74D","#FFEA51","#4BF0FF","#44AFF0","#4E82FF","#584BFF","#BE4DFF","#F845F1"]'
	                	shieldSettings="{yAxis: {name: '亿吨公里'}}"
	                	style="width:100%;height: 280px;"></div>
	            </div>
	            <div class="right_2">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                    <!--右下边框-->
	                    <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div> 
	                <div class="main_title"><img src="img/t_5.png" alt="">山东省高速公路</div>
	                <!--  扩展地图 -->
	                <div id="chart_4" class="echart fl t_btn4 loadItem" data-url="data/mapdata_gonglu.json"  data-type="extend" data-extendfn="map_extend" 
	                	data-style="notitle notooltip" data-topdata="10,#31A031,max:12" style="width:100%;height: 280px;cursor: pointer;"></div>
	            </div>
	        </div>
	    </div>
	    <div class="data_bottom">
	        <div class="bottom_1 fl t_btn5" style="cursor: pointer;">
	            <!--左上边框-->
	            <div class="t_line_box">
	                <i class="t_l_line"></i> 
	                <i class="l_t_line"></i> 
	            </div> 
	            <!--右上边框-->
	            <div class="t_line_box">
	                <i class="t_r_line"></i> 
	                <i class="r_t_line"></i> 
	            </div> 
	            <!--左下边框-->
	            <div class="t_line_box">
	                <i class="l_b_line"></i> 
	                <i class="b_l_line"></i> 
	            </div> 
	                <!--右下边框-->
	                <div class="t_line_box">
	                <i class="r_b_line"></i> 
	                <i class="b_r_line"></i> 
	            </div>
	            <div class="main_title"><img src="img/t_6.png" alt="">山东省飞机场</div>
	            <!--  扩展地图 -->
	            <div id="chart_5" class="echart fl loadItem" data-url="data/mapdata_feijichang.json"  data-type="extend" data-extendfn="map_extend" data-dataname="airname"
	            	data-tooltip-show="airname" 
                	data-style="notitle " data-pointer="max:25" data-topdata="10,#08BAED,max:12"  style="width:100%;height: 250px;margin-top: 15px;"></div>
	        </div>
	        <div class="bottom_center fl">
	            <div class="bottom_2 fl">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                    <!--右下边框-->
	                    <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div>
	                <div class="main_title"><img src="img/t_7.png" alt="">山东省交通</div>
	                <!-- 数据列表 -->
	                <div class="main_table t_btn8 loadItem" data-url="data/list_jiaotong.json" data-type="list"></div>
	            </div>
	            <div class="bottom_3 fl">
	                <!--左上边框-->
	                <div class="t_line_box">
	                    <i class="t_l_line"></i> 
	                    <i class="l_t_line"></i> 
	                </div> 
	                <!--右上边框-->
	                <div class="t_line_box">
	                    <i class="t_r_line"></i> 
	                    <i class="r_t_line"></i> 
	                </div> 
	                <!--左下边框-->
	                <div class="t_line_box">
	                    <i class="l_b_line"></i> 
	                    <i class="b_l_line"></i> 
	                </div> 
	                    <!--右下边框-->
	                    <div class="t_line_box">
	                    <i class="r_b_line"></i> 
	                    <i class="b_r_line"></i> 
	                </div>
	                <div class="main_title"><img src="img/t_7.png" alt="">山东省业务量 </div>
	                <!-- 数据列表 -->
	                <div class="main_table t_btn2 loadItem" data-url="data/list_yewuliang.json" data-type="list"></div>
	            </div>
	        </div>
	        <div class="bottom_4 fr">
	            <!--左上边框-->
	            <div class="t_line_box">
	                <i class="t_l_line"></i> 
	                <i class="l_t_line"></i> 
	            </div> 
	            <!--右上边框-->
	            <div class="t_line_box">
	                <i class="t_r_line"></i> 
	                <i class="r_t_line"></i> 
	            </div> 
	            <!--左下边框-->
	            <div class="t_line_box">
	                <i class="l_b_line"></i> 
	                <i class="b_l_line"></i> 
	            </div> 
	                <!--右下边框-->
	                <div class="t_line_box">
	                <i class="r_b_line"></i> 
	                <i class="b_r_line"></i> 
	            </div>
	            <div class="main_title"><img src="img/t_7.png" alt="">山东省汽车</div>
	             <!-- 数据列表 -->
	            <div class="main_table t_btn3 loadItem" data-url="data/list_qiche.json" data-type="list""></div>
	        </div>
	    </div>
	</div>
	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
    <!-- <script type="text/javascript">
    //ShieldCharts.theme = "infographic";
    </script> -->
    <!-- <script type="text/javascript" src="../../js/theme/infographic.js"></script>
    <script type="text/javascript" src="../../js/theme/macarons.js"></script> -->
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
    
	<script type="text/javascript" src="../../js/china.js"></script>

	<script src="js/bootstrap.min.js"></script>
	<script src="js/common.js"></script>
	<script src="js/dataTool.js"></script>
	<script src="js/index.js"></script>
	<script src="js/hunan.js"></script>
</body>
</html>